<template>
	<view class="home">
		<view class="flex align-center padding-tb-20 padding-lr-30">
			<view class="searchbg">
				<text class="tyIcon-search text-66"></text>
				<input type="text" placeholder="搜索门店名或地址" v-model="name" class="flex-one margin-left-20 text-32"
					confirm-type='search' @confirm="getSearch" />
			</view>
			<view class="sort-item flex align-center margin-left-30" @click="go('/pages/board/city')">
				<view class="text-28 text-cut-one">{{city}}</view>
				<image src="/static/board/xiala.png" mode="" class="xialaimg margin-left-10"></image>
			</view>
		</view>
		<view class="margin-top-20 margin-lr-30">
			<view class="bg-ff radius-40 padding-20 flex margin-bottom-40 bg-shadow" v-for="(item,index) in list"
				:key="index">
				<image :src="item.image" mode="" class="listimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-32">{{item.name}}</view>
					<view class="flex align-center margin-top-10">
						<image src="/static/board/phone.png" mode="" class="phoneimg"></image>
						<view class="text-28 text-66 margin-left-10">{{item.tel}}</view>
					</view>
					<view class="flex align-center margin-top-10 ">
						<image src="/static/board/adres.png" mode="" class="phoneimg"></image>
						<view class="text-28 text-66 text-cut-one margin-left-10 flex-one">{{item.address}}</view>
					</view>
					<view class="flex justify-between align-center margin-top-40">
						<view class="jlbtn text-cut-one">离你{{item.distance}}</view>
						<view class="listbtn" @click="go('/pages/board/make?id='+item.id+'&name='+item.name+'&tel='+item.tel+'&address='+item.address+'&image='+item.image)">立即预约</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city: "",
				city_id: "",
				name: "",
				list:[]
			}
		},
		onShow() {
			var that = this
			if (uni.getStorageSync('city')) {
				that.city = uni.getStorageSync('city')
				that.city_id = uni.getStorageSync('city_id')
				that.loadList(1)
			} else {
				//获取位置
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.setStorageSync('lat', res.latitude)
						uni.setStorageSync('lng', res.longitude)
						that.rq.getData('common/getLocation', {
							latitude: res.latitude,
							longitude: res.longitude
						}).then(res => {
							if (res.code == 1) {
								uni.setStorageSync('city', res.data.city)
								uni.setStorageSync('city_id', res.city_id)
								that.city = res.data.city
								that.city_id = res.city_id
								that.loadList(1)
							}
						})

					},
					fail: function(res) {
						console.log(res, '失败');
					}
				})
			}
		},
		methods: {
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('shop/shop_list', {
					latitude: uni.getStorageSync('lat'),
					longitude: uni.getStorageSync('lng'),
					name: that.name,
					city_id: uni.getStorageSync('city_id')
				}, {
					that: that,
					first_page: isFirstPage
				})
			},
			getSearch() {
				this.loadList(1)
			}
		},
		onReachBottom() {
			this.loadList(0)
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.searchbg {
		width: 576rpx;
		height: 80rpx;
		background: #F3F3F3;
		border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.xialaimg {
		width: 20rpx;
		height: 20rpx;
	}

	.listimg {
		width: 226rpx;
		height: 226rpx;
		border-radius: 40rpx;
	}

	.phoneimg {
		width: 28rpx;
		height: 28rpx;
	}

	.jlbtn {
		font-size: 24rpx;
		color: #999999;
		line-height: 50rpx;
		height: 50rpx;
		padding: 0 15rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
	}

	.listbtn {
		width: 174rpx;
		height: 60rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
</style>